<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title></title>
    <link rel="shortcut icon" href="/favico.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/js/editormd/css/editormd.css" />
    <link rel="stylesheet" type="text/css" href="/js/webuploader/webuploader.css" />
  <style>
  	body{background: #f3f5f6;}
	@charset "UTF-8";body,div,h4,p{margin:0;padding:0}:focus{outline:0}h4{font-size:100%;font-weight:400}body{background:#fff;color:#5e5e5e;font:14px/2em Microsoft YaHei,SimSun,Arial}:link,:visited{text-decoration:none}a:link,a:visited{color:#5e5e5e}a:hover{color:#c9394a}a:active{color:#666}.clearfix:after{content:'\0020';display:block;height:0;clear:both;visibility:hidden}.clearfix{*zoom:1}a:focus{outline:0;-moz-outline:0}body,html{font:14px/1.5 "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif;color:#1c1f21;height:100%}body{min-width:1200px;background-color:#f8fafc;overflow-y:auto;padding-top:0;-webkit-transition:-webkit-transform .3s ease;transition:transform .3s ease}a:link,a:visited{color:#1c1f21}a:active,a:hover{color:#ec1500}.clearfix:after{content:'\0020';display:block;height:0;clear:both;visibility:hidden}
	body #main{margin:20px;min-height:calc(100vh - 266px);background:#fff;padding:10px 30px;}
	a{outline:0}a:active{star:expression(this.onFocus=this.blur())}a{outline:0}@media screen and (max-width:767px){body:after{width:100%;height:100%;position:absolute;top:0;z-index:1000;content:" ";display:block;background:#000;opacity:0;-webkit-transition:all .3s ease;transition:all .3s ease;visibility:hidden}}@font-face{font-family:icomoon;src:url(/static/fonts/icomoon/fonts/icomoon.eot?d8493nx);src:url(/static/fonts/icomoon/fonts/icomoon.eot?d8493nx#iefix) format('embedded-opentype'),url(/static/fonts/icomoon/fonts/icomoon.ttf?d8493nx) format('truetype'),url(/static/fonts/icomoon/fonts/icomoon.woff?d8493nx) format('woff'),url(/static/fonts/icomoon/fonts/icomoon.svg?d8493nx#icomoon) format('svg');font-weight:400;font-style:normal}@font-face{font-family:DINCond-M;src:url(/static/fonts/DINCondm/DINCOND-MEDIUM.otf);font-weight:400;font-style:normal}@font-face{font-family:KaTeX_AMS;src:url(/static/fonts/katex/KaTeX_AMS-Regular.672c961.eot);src:url(/static/fonts/katex/KaTeX_AMS-Regular.672c961.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_AMS-Regular.f4c3270.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_AMS-Regular.e78f217.woff) format("woff"),url(/static/fonts/katex/KaTeX_AMS-Regular.9971d27.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(/static/fonts/katex/KaTeX_Caligraphic-Bold.3c3fce5.eot);src:url(/static/fonts/katex/KaTeX_Caligraphic-Bold.3c3fce5.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Caligraphic-Bold.a2e0522.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Caligraphic-Bold.bac6199.woff) format("woff"),url(/static/fonts/katex/KaTeX_Caligraphic-Bold.743b42a.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(/static/fonts/katex/KaTeX_Caligraphic-Regular.a0ba281.eot);src:url(/static/fonts/katex/KaTeX_Caligraphic-Regular.a0ba281.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Caligraphic-Regular.479a68e.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Caligraphic-Regular.a64e134.woff) format("woff"),url(/static/fonts/katex/KaTeX_Caligraphic-Regular.244db27.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(/static/fonts/katex/KaTeX_Fraktur-Bold.2b4454d.eot);src:url(/static/fonts/katex/KaTeX_Fraktur-Bold.2b4454d.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Fraktur-Bold.8e5f883.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Fraktur-Bold.0a0aa19.woff) format("woff"),url(/static/fonts/katex/KaTeX_Fraktur-Bold.ad26cc8.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(/static/fonts/katex/KaTeX_Fraktur-Regular.dc81eae.eot);src:url(/static/fonts/katex/KaTeX_Fraktur-Regular.dc81eae.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Fraktur-Regular.ae2b6f4.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Fraktur-Regular.f980ca7.woff) format("woff"),url(/static/fonts/katex/KaTeX_Fraktur-Regular.d459632.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(/static/fonts/katex/KaTeX_Main-Bold.d327c21.eot);src:url(/static/fonts/katex/KaTeX_Main-Bold.d327c21.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Main-Bold.83f8b32.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Main-Bold.d8a629d.woff) format("woff"),url(/static/fonts/katex/KaTeX_Main-Bold.e69b951.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(/static/fonts/katex/KaTeX_Main-Italic.2702ac3.eot);src:url(/static/fonts/katex/KaTeX_Main-Italic.2702ac3.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Main-Italic.07510ed.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Main-Italic.8dd42e0.woff) format("woff"),url(/static/fonts/katex/KaTeX_Main-Italic.1b22614.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:KaTeX_Main;src:url(/static/fonts/katex/KaTeX_Main-Regular.31ec450.eot);src:url(/static/fonts/katex/KaTeX_Main-Regular.31ec450.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Main-Regular.bd65225.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Main-Regular.2dffc87.woff) format("woff"),url(/static/fonts/katex/KaTeX_Main-Regular.d9162df.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Math;src:url(/static/fonts/katex/KaTeX_Math-Italic.031026c.eot);src:url(/static/fonts/katex/KaTeX_Math-Italic.031026c.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Math-Italic.afeebb7.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Math-Italic.da58601.woff) format("woff"),url(/static/fonts/katex/KaTeX_Math-Italic.55fbb3a.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:KaTeX_SansSerif;src:url(/static/fonts/katex/KaTeX_SansSerif-Regular.a3319b7.eot);src:url(/static/fonts/katex/KaTeX_SansSerif-Regular.a3319b7.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_SansSerif-Regular.7d5fa3e.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_SansSerif-Regular.48c7df6.woff) format("woff"),url(/static/fonts/katex/KaTeX_SansSerif-Regular.8075d14.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Script;src:url(/static/fonts/katex/KaTeX_Script-Regular.cf8394e.eot);src:url(/static/fonts/katex/KaTeX_Script-Regular.cf8394e.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Script-Regular.c472b57.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Script-Regular.5acb381.woff) format("woff"),url(/static/fonts/katex/KaTeX_Script-Regular.abb12fc.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size1;src:url(/static/fonts/katex/KaTeX_Size1-Regular.5438d9d.eot);src:url(/static/fonts/katex/KaTeX_Size1-Regular.5438d9d.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Size1-Regular.feed6c7.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Size1-Regular.bdd0d5e.woff) format("woff"),url(/static/fonts/katex/KaTeX_Size1-Regular.8cc60fd.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size2;src:url(/static/fonts/katex/KaTeX_Size2-Regular.1f5c2ab.eot);src:url(/static/fonts/katex/KaTeX_Size2-Regular.1f5c2ab.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Size2-Regular.8a86a0a.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Size2-Regular.fd67fb3.woff) format("woff"),url(/static/fonts/katex/KaTeX_Size2-Regular.5976fff.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size3;src:url(/static/fonts/katex/KaTeX_Size3-Regular.1a6c0d6.eot);src:url(/static/fonts/katex/KaTeX_Size3-Regular.1a6c0d6.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Size3-Regular.2c1ea03.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Size3-Regular.943c94f.woff) format("woff"),url(/static/fonts/katex/KaTeX_Size3-Regular.e929f5d.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size4;src:url(/static/fonts/katex/KaTeX_Size4-Regular.5a3cee2.eot);src:url(/static/fonts/katex/KaTeX_Size4-Regular.5a3cee2.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Size4-Regular.680d35e.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Size4-Regular.6853774.woff) format("woff"),url(/static/fonts/katex/KaTeX_Size4-Regular.81ab95e.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Typewriter;src:url(/static/fonts/katex/KaTeX_Typewriter-Regular.179ea52.eot);src:url(/static/fonts/katex/KaTeX_Typewriter-Regular.179ea52.eot#iefix) format("embedded-opentype"),url(/static/fonts/katex/KaTeX_Typewriter-Regular.d2f65c2.woff2) format("woff2"),url(/static/fonts/katex/KaTeX_Typewriter-Regular.9bd7cfe.woff) format("woff"),url(/static/fonts/katex/KaTeX_Typewriter-Regular.8f16d7f.ttf) format("truetype");font-weight:400;font-style:normal}.nano .nano-pane{right:0!important;width:4px!important}.nano .nano-pane .nano-slider{background:rgba(28,31,33,.1)!important;border-radius:4px!important}body{overflow:hidden;background-color:#f3f5f6}
	body #main .article-head{position:relative;height:68px;overflow: hidden;margin-bottom: 10px;}
	body #main .article-head .draft-warp{float:left;margin:16px 0 0 0;position:relative}body #main .article-head .draft-warp .draft-btn{float:left;position:relative;width:108px;height:36px;background:rgba(28,31,33,.08);color:#545c63;border-radius:18px}body #main .article-head .draft-warp .draft-btn>p{text-align:center;cursor:pointer;margin:0}body #main .article-head .draft-warp .draft-btn>p i{position:relative;top:2px;font-size:16px}body #main .article-head .draft-warp .draft-btn>p span{font-size:14px;line-height:36px}body #main .article-head .draft-warp .draft-btn .draft-num{position:absolute;top:-4px;right:-4px;padding:2px 4px;background:#f20d0d;border-radius:8px;font-size:12px;color:#fff;line-height:12px}body #main .article-head .draft-warp .draft-tip{float:left;margin:8px 0 0 12px;font-size:12px;color:#9199a1;line-height:18px}body #main .article-head .draft-warp .draft-container{position:absolute;top:52px;z-index:3;width:384px;height:366px;padding:16px;box-sizing:border-box;box-shadow:0 8px 16px 0 rgba(7,17,27,.2);background-color:#fff;border-radius:12px}body #main .article-head .draft-warp .draft-container .arrow-icon{display:block;width:0;height:0;border-width:0 16px 16px;border-style:solid;border-color:transparent transparent #fff;position:absolute;top:-16px}body #main .article-head .draft-warp .draft-container .draft-container-title span:first-child{float:left;font-weight:700;font-size:14px;color:#1c1f21;line-height:22px}body #main .article-head .draft-warp .draft-container .draft-container-title span:nth-child(2){float:right;font-size:12px;color:#9199a1;line-height:18px}body #main .article-head .draft-warp .draft-container .draft-list{margin-top:14px;height:298px}body #main .article-head .draft-warp .draft-container .draft-list .draft-item{display:block;height:60px;padding:12px;background:rgba(84,92,99,.05);border-radius:8px;box-sizing:border-box;cursor:pointer}body #main .article-head .draft-warp .draft-container .draft-list .draft-item:not(:first-child){margin-top:4px}body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-icon{float:left;font-size:32px;color:#b2b8bd;line-height:36px}body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-item-info{float:left;margin-left:12px;width:244px}body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-item-info h4{font-weight:700;font-size:14px;color:#545c63;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-item-info p{font-size:12px;color:#9199a1;line-height:16px;margin:0}body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-del{display:none;float:right;font-size:20px;color:#b2b8bd;line-height:36px}body #main .article-head .draft-warp .draft-container .draft-list .draft-item:hover{background:rgba(0,85,255,.1)}body #main .article-head .draft-warp .draft-container .draft-list .draft-item:hover .draft-item-info h4{color:#05f}body #main .article-head .draft-warp .draft-container .draft-list .draft-item:hover .draft-del{display:block}body #main .article-head .editor-change-warp{position:absolute;left:50%;transform:translate(-50%);margin-top:22px}body #main .article-head .editor-change-warp span{padding:4px 12px;font-size:12px;color:#545c63;line-height:16px;cursor:pointer}body #main .article-head .editor-change-warp span.active{background:#9199a1;color:#fff;border-radius:12px}body #main .article-head .editor-change-warp span:first-child{margin-right:12px}
	body #main .article-head .publish-btn{display:block;float:right;margin:16px 0 0 0;width:148px;height:46px;line-height:46px;text-align:center;font-size:14px;color:#fff;background:#37f;border-radius:32px;cursor:pointer}body #main .article-wrap{width:800px;height:auto;margin:0 auto;padding:0 32px;box-sizing:border-box;background:#fff;box-shadow:0 8px 16px 0 rgba(28,31,33,.1);border-radius:12px 12px 0 0}.nano{position:relative;width:100%;height:100%;overflow:hidden}.nano>.nano-content{position:absolute;overflow:scroll;overflow-x:hidden;top:0;right:0;bottom:0;left:0}.nano>.nano-content:focus{outline:thin dotted}.nano>.nano-content::-webkit-scrollbar{display:none}.has-scrollbar>.nano-content::-webkit-scrollbar{display:block}.nano>.nano-pane{position:absolute;width:10px;right:10px;top:0;bottom:0;visibility:hidden\9;-webkit-transition:.2s;-moz-transition:.2s;-o-transition:.2s;transition:.2s;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.nano>.nano-pane>.nano-slider{background:#4e5a5e;position:relative;margin:0 1px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.nano:hover>.nano-pane{visibility:visible\9;opacity:.99}
	body #main  .article-title {
	    height:62px;
	    text-indent: 0.1em;
	    font-weight: 700;
	    font-size: 20px;
	    color: #1c1f21;
	    line-height: 30px;
	    box-sizing: content-box;
	    border: none;
	    margin-right: 10px;
	    border-bottom: 1px solid #eee;
	}
  </style>
 </head> 
 <body>
     <div id="app">
         <input type="hidden" ref="blogId" value="${(blogId)!}">
         <div id="main" class="yykk_editbox">
             <div class="article-head clearfix">
                 <a href="/blog" style="margin-right: 10px"> <返回</a>
                 <!--@change="changeCategory($event)"-->
                 <select name="topicCategoryId"  v-model="blog.categoryId" class="article-title" id="category" style="width: 180px;">
                     <option v-for="(category,index) in categoryList" :value="category.id">{{category.categoryTitle}}</option>
                 </select>
                 <input type="text" id="article_title" onkeyup="cacheBlog()" v-model="blog.title" class="article-title" placeholder="请在此输入标题" style="width: 25%; ">
                 <input type="text" id="article-desc" onkeyup="cacheBlog()" v-model="blog.description" class="article-title" placeholder="用一句话描述此文章" style="width: 22%; font-weight:400;font-size: 12px;position: relative;top:-2px;">
                 <input type="text" id="article-img" onkeyup="cacheBlog()" v-model="blog.img" ref="blogimg" class="article-title" placeholder="上传封面" style="width: 24%; font-weight:400;font-size: 12px;position: relative;top:-2px;">
                 <div class="pos" style="position: absolute;right: 0;top: 0">
                     <span id="filePicker" style="top: 17px;right: 17px;">选择图片</span>
                     <img src="/img/dengdai2.png" height="40" id="urlimg" alt="封面图" style="position: absolute;top: 18px;right: 259px;">
                     <span class="publish-btn js-article-publish" @click="saveBlog">发表</span>
                 </div>
             </div>
             <!-- 文章的主体内容 textarea -->
             <div id="article-content"> </div>
         </div>
     </div>

  <script src="/js/jquery.min.js"></script>
  <script src="/js/editormd/editormd.js"></script>
  <script src="/js/vue.global.js"></script>
  <script src="/js/webuploader/webuploader.js"></script>
  <script src="/js/axios.min.js"></script>
  <script src="/js/blog/add.js"></script>
  <script>
      // 初始化Web Uploader
      var uploader = WebUploader.create({

          // 选完文件后，是否自动上传。
          auto: true,

          // swf文件路径
          swf: 'js/webuploader/Uploader.swf',

          // 文件接收服务端。
          server: '/api/oss/uploadfile?dir=blogs',

          // 选择文件的按钮。可选。
          // 内部根据当前运行是创建，可能是input元素，也可能是flash.
          pick:{
              id: '#filePicker',
              // 默认是：true代表选择多张上传， false只能选择一张
              multiple: false
          } ,

          // 只允许选择图片文件。
          accept: {
              title: 'Images',
              extensions: 'gif,jpg,jpeg,bmp,png',
              mimeTypes: 'image/*'
          }
      });

      // 文件上传成功的回调
      uploader.on( 'uploadSuccess', function( file , response ) {
          console.log( response.url );
          document.getElementById("article-img").value = response.url
          document.getElementById("urlimg").src = response.url
          cacheBlog()
          app.blog.img = response.url
      });

  </script>
 </body>
</html>